<style lang="scss" scoped>
    div {
        cursor: pointer;
        padding-right: 20px;

    }

    i.fl-r {
        position: absolute;
        right: 0;
        top: 3px;
        color: #ccc;
        padding-right: 3px;

        // &::after {
        //     content: attr(data-num);
        //     font-size: 16px;
        //     /*position: relative;
        //     z-index: -10 !important;*/
        //     color: #ccc !important;
        // }
    }
</style>
<template>
    <div class="ui-ellipsis" @click="handler">
        <slot></slot>
        <i class="fl-r" :class="arrow[num]" :data-num="colIndex"></i>
    </div>
</template>
<script>
    export default {
        name: 'ui-sort-td',
        props: {
            prop: { type: String },
            scope: { type: Object }
        },
        data() {
            return {
                // label: this.scope.column.label,
                arrow: ['el-icon-d-caret', 'el-icon-caret-bottom t-teal', 'el-icon-caret-top t-teal'],
                num: 0,
                idx: ''
            }
        },
        created() {
            // 创建一个排序数字公共容器
            if (!this.scope.store.orderNum) {
                this.$set(this.scope.store.states, 'orderNum', [])
                this.$set(this.scope.store.states, 'orderQuery', [])
            }
        },
        /*watch: {
            'scope.store.orderNum': {
                handler(val, oldVal) {
                    console.log(val)
                }
            }
        },*/
        mounted() {
            this.$eventHub.$on('ui-screening:reset', () => {
                // 重置所有状态
                this.num = 0
                this.$set(this.scope.store.states, 'orderNum', [])
                this.$set(this.scope.store.states, 'orderQuery', [])
                let vm = this.scope._self
                vm.searchData.pageNumber = 1
                vm.searchData.order = ''
            })

        },
        computed: {
            colIndex() {
                let num = this.scope.store.states.orderNum.indexOf('oNum:' + this.scope.$index) + 1
                return num > 0 ? num : ''
            }
        },
        methods: {
            handler() {

                // 点击 0 1 2 循环
                this.num++
                if (this.num > 2) this.num = 0

                // 数字排序
                let colIndex = this.scope.$index
                let orderNum = this.scope.store.states.orderNum
                let index = orderNum.indexOf('oNum:' + colIndex)
                if (index < 0) {
                    orderNum.push('oNum:' + colIndex)
                }else{
                    orderNum.splice(index, 1)
                    if (this.num > 0) {
                        orderNum.push('oNum:' + colIndex)
                    }
                }

                // 数据库查询
                let oSort
                let orderQuery = this.scope.store.states.orderQuery
                switch(this.num){ // 获取查询状态
                    case 1:
                        oSort = 'desc'
                        break
                    case 2:
                        oSort = 'asc'
                        break
                }
                orderQuery.forEach((item, i) => { // 删除重复数据
                    if (item.prop === this.prop) {
                        orderQuery.splice(i, 1)
                    }
                })
                if (oSort) { // 只有存在查询状态的数据才插入最后
                    orderQuery.push({ prop: this.prop, order: oSort })
                }

                // 格式化查询数据
                let orderArr = []
                orderQuery.forEach((item) => {
                    orderArr.push(`${ item.prop } ${ item.order }`)
                })
                // console.log(orderArr.join())

                // 执行回调
                if (this.$listeners.click) { // 如果组件存在@click 执行自定义回调
                    this.$emit('click', orderArr.join())
                }else{ //执行默认查询
                    let vm = this.scope._self
                    vm.searchData.pageNumber = 1
                    vm.searchData.order = orderArr.join()
                    if(vm.slotUrl) {
                        vm.$$uiTableLoad(vm.slotUrl)
                    } else {
                        vm.$$uiTableLoad(vm.url + 'pageList')
                    }
                }
            }
        },
        beforeDestroy() {
            this.$eventHub.$off('ui-screening:reset')
        }

    }
</script>
